<!doctype html>
<html>
<head>
    <title>Line Chart: Legend Markers</title>
    <script src="../../../codebase/webix.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="../../../codebase/webix.css">
    <script src="../../common/chartdata.js"></script>
<body>
<div id="chartDiv" style="width:600px;height:270px;margin:20px"></div>
<script>
    webix.ui({
        view:"chart",
        container:"chartDiv",
        type:"line",

        xAxis:{
            template:"'#year#"
        },
        yAxis:{
            start:0,
            step: 10,
            end: 100
        },
        offset:0,
        legend:{
            values:[{text:"Company A"},{text:"Company B"},{text:"Company C"}],
            align:"right",
            valign:"middle",
            layout:"y",
            width: 100,
            margin: 8,
            marker:{
                type: "item",
	            width: 18
            }
        },
        series:[
            {
                value:"#sales#",
                item:{
                    borderColor: "#447900",
                    color: "#69ba00"
                },
                line:{
                    color:"#69ba00",
                    width:2
                },
                tooltip:{
                    template:"#sales#"
                }
            },
            {
                value:"#sales2#",
                item:{
                    borderColor: "#0a796a",
                    color: "#4aa397",
                    type:"s",
                    radius: 4
                },
                line:{
                    color:"#4aa397",
                    width:2
                },
                tooltip:{
                    template:"#sales2#"
                }
            },
            {
                value:"#sales3#",
                item:{
                    borderColor: "#b7286c",
                    color: "#de619c",
                    type:"t",
                    radius: 4
                },
                line:{
                    color:"#de619c",
                    width:2
                },
                tooltip:{
                    template:"#sales3#"
                }
            }
        ],
        data: multiple_dataset
    });
</script>
</body>
</html>

